import type { App } from 'vue'
import { createI18n } from 'vue-i18n'
import { useLocaleStoreWithOut } from '@/stores/modules/locale'
import type { I18nOptions } from 'vue-i18n'
import type { LangType } from '@/stores/modules/types'

// 设置html标签当前语言
const setHtmlPageLang = (locale: LangType) => {
  document.querySelector('html')?.setAttribute('lang', locale)
}
// 用于存储createI18n返回值
export let i18n: ReturnType<typeof createI18n>

// 处理createI18n的参数，动态加载语言包文件
const createI18nOptions = async (): Promise<I18nOptions> => {
  // 获取语言包状态管理
  const localeStore = useLocaleStoreWithOut()
  // 获取当前语言
  const locale = localeStore.getCurrentLocale
  // 获取语言选择数组
  const localeMap = localeStore.getLocaleMap
  // 动态加载语言包文件
  //  此处不要使用@/locales路径导入，否则会失败
  const defaultLocal = await import(`../locales/${locale}.ts`)
  const message = defaultLocal.default ?? {}
  // 设置html语言
  setHtmlPageLang(locale)
  // 初始化时存储当前语言（否则当用户不执行语言设置时本地没有语言存储）
  localeStore.setLang(locale)

  return {
    legacy: false,
    locale: locale, // 当前语言
    fallbackLocale: locale, // 回退语言
    // 语言map
    messages: {
      [locale]: message,
    },
    // 可用的语言数组（可能无用）
    availableLocales: localeMap.map((v) => v.lang),
    // 是否根组件语言同步到本地组件
    sync: true,
    // 本地化失败时是否禁止输出警告
    silentTranslationWarn: true,
    // 本地化失败时输出警告
    missingWarn: false,
    // 本地化失败时禁止显示回退警告
    silentFallbackWarn: true,
  }
}
// 注册使用i18n插件
export const setupI18n = async (app: App<Element>) => {
  // 生产配置项
  const options = await createI18nOptions()
  i18n = createI18n(options)
  app.use(i18n)
}
